<template>
  <div class="app-bar">
    <img
      class="logo"
      @click="clickLogo"
      v-if="(!back && from !== 'ios' && from !== 'android') || logo"
      src="../../assets/logo.png"
      alt=""
    />
    <div
      class="back aaa"
      v-else-if="!back && (from == 'ios' || from == 'android')"
      @click="clickLogo"
    >
      <van-icon name="arrow-left" />
    </div>
    <div class="back" v-else @click="backPage">
      <van-icon name="arrow-left" />
    </div>
    <h1 class="title" @click="openDebug">{{ title || "图鉴" }}</h1>
    <slot name="right">
      <img class="share" @click="share" src="../../assets/share.svg" alt="" />
    </slot>
  </div>
</template>

<script>
import Vconsole from "vconsole";

export default {
  props: {
    title: String,
    type: String,
    data: Object,
    back: {
      type: Boolean,
      default: () => false,
    },
    backFunc: Boolean,
    logo: {
      type: Boolean,
      default: () => false,
    },
  },
  data() {
    return {
      from: null,
      num: 0,
    };
  },
  created() {
    this.from = window.from;
  },
  methods: {
    openDebug() {
      this.num += 1;
      if (this.num > 10 && !window.debug) {
        new Vconsole();
        window.debug = true;
      }
    },
    share() {
      let path = window.location.pathname.substr(6);
      let match = ["/match", "/myheroe", "/enlist", "/publish", "/forms"];
      let isMatch = false;
      match.some((item) => {
        if (path.indexOf(item) === 0) isMatch = true;
        return isMatch;
      });

      try {
        window.gankeTool.collectEvent({
          ditch: true,
          tool_name: isMatch ? "三国志.战略版搭配" : "三国志.战略版图鉴",
          channel_name: "三国志.战略版",
          channel_id: "1000055",
        });
      } catch (e) {
        console.error("分享统计异常", e);
      }

      let url = window.location.origin + window.location.pathname;
      let from = window.getQueryString("from") || "web";
      if (from == "web" || from == "vivo") {
        this.$copyText(url).then(
          () => this.$toast("复制链接成功"),
          () => this.$toast.error("链接复制失败")
        );
      } else {
        let share = { url };
        if (this.type === "list") {
          share.title = "三国志战略版武将战法图鉴大全 -  Ganke游戏社区";
          share.description = "你再也找不到比这更全更好用的三战武将图鉴了！";
          share.imgurl =
            "http://leiting-shequ-image.oss-cn-shanghai.aliyuncs.com/leiting/8767108a330611eb8ce49d4af5205ea1.png";
        } else if (this.type === "heroe") {
          share.title = this.data.name + " - 武将介绍及战法搭配推荐";
          share.description = this.data.intro;
          share.imgurl = this.data.avatar;
        } else if (this.type === "tactic") {
          share.title = this.data.name + " - 战法介绍及搭配推荐";
          share.description = this.data.info.substr(0, 100);
          share.imgurl = this.data.avatar;
        } else if (this.type === "match") {
          share.title =
            "配将助手 - 三国志战略版热门阵容搭配推荐 -  Ganke游戏社区";
          share.description =
            "三战热门强力阵容推荐，根据拥有武将自动匹配可用阵容。";
          share.imgurl =
            "http://leiting-shequ-image.oss-cn-shanghai.aliyuncs.com/leiting/8767108a330611eb8ce49d4af5205ea1.png";
        } else if (this.type === "forms") {
          share.title = this.data.title + " -  Ganke游戏社区";
          share.description = this.data.description;
          share.imgurl = this.data.imgurl;
        }
        window.injectedAll.share(
          share.title,
          share.url,
          share.description,
          share.imgurl
        );
      }
    },
    clickLogo() {
      let from = window.getQueryString("from") || "web";
      if (from == "web" || from == "vivo") {
        if (this.$route.path === "/heroes") {
          if (from === "vivo") {
            window.location.href = this.vivoURL;
          }
        } else if (this.$route.path === "/match") {
          if (window.routerHistory.length > 1) {
            this.$router.back();
          } else if (from === "vivo") {
            window.location.href = this.vivoURL;
          } else {
            this.$router.replace("/heroes");
          }
        } else {
          this.$router.replace("/heroes");
        }
      } else {
        if (
          this.$route.path === "/heroes" ||
          this.$route.path === "/tactics" ||
          this.$route.path === "/books"
        ) {
          window.injectedAll.finishWebView();
        } else {
          this.$router.replace("/heroes");
        }
      }
    },
    backPage() {
      if (this.backFunc) this.$emit("return");
      else this.$router.back();
      // else window.history.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.app-bar {
  padding: 0 0.15rem;
  height: 0.46rem;
  position: fixed;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 500px;
  transform: translateX(-50%);
  text-align: center;
  box-sizing: border-box;
  z-index: 4;
  background: #fff;
  .logo {
    position: absolute;
    top: 50%;
    width: 0.78rem;
    left: 0.15rem;
    height: 0.24rem;
    transform: translateY(-50%);
  }
  .back {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.18rem;
    left: 0;
    padding: 0.15rem;
    margin-top: 0.01rem;
    cursor: pointer;
    i {
      text-shadow: 0 0 5px 1px #000;
    }
  }
  .title {
    margin: 0;
    font-size: 0.14rem;
    font-weight: 400;
    color: #333333;
    height: 100%;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
  }
  .share {
    position: absolute;
    top: 50%;
    right: 0.18rem;
    transform: translateY(-50%);
    width: 0.18rem;
    height: 0.18rem;
  }
}
</style>
